<template>
  <div class="visit-report">
    <!-- 页面标题和操作区 -->
    <div class="page-header">
      <h2>江苏电信走访工作报告</h2>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width: 300px; margin-right: 15px"
        />
        <el-select
          v-model="selectedRegion"
          placeholder="选择区域"
          style="width: 120px; margin-right: 15px"
        >
          <el-option label="全省" value="all"></el-option>
          <el-option label="南京市" value="nanjing"></el-option>
          <el-option label="苏州市" value="suzhou"></el-option>
          <el-option label="无锡市" value="wuxi"></el-option>
          <el-option label="常州市" value="changzhou"></el-option>
          <el-option label="南通市" value="nantong"></el-option>
          <el-option label="徐州市" value="xuzhou"></el-option>
        </el-select>
        <el-button type="primary" @click="exportReport">导出报告</el-button>
      </div>
    </div>

    <!-- 关键指标概览 -->
    <div class="form-section">
      <h3 class="section-title">关键指标概览</h3>
      <div class="info-grid">
        <div class="stat-card">
          <div class="kpi-content">
            <div class="kpi-icon">
              <el-icon class="icon-large"><CheckCircle /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ totalVisits }}</div>
              <div class="kpi-label">总走访次数</div>
            </div>
            <div class="kpi-change">
              <span :class="totalVisitsChange.class">{{
                totalVisitsChange.text
              }}</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="kpi-content">
            <div class="kpi-icon">
              <el-icon class="icon-large"><User /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ visitedCustomers }}</div>
              <div class="kpi-label">走访客户数</div>
            </div>
            <div class="kpi-change">
              <span :class="visitedCustomersChange.class">{{
                visitedCustomersChange.text
              }}</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="kpi-content">
            <div class="kpi-icon">
              <el-icon class="icon-large"><Target /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ targetCompletionRate }}%</div>
              <div class="kpi-label">目标完成率</div>
            </div>
            <div class="kpi-change">
              <span :class="targetCompletionRateChange.class">{{
                targetCompletionRateChange.text
              }}</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="kpi-content">
            <div class="kpi-icon">
              <el-icon class="icon-large"><DollarSign /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ avgOrderValue }}</div>
              <div class="kpi-label">平均订单价值</div>
            </div>
            <div class="kpi-change">
              <span :class="avgOrderValueChange.class">{{
                avgOrderValueChange.text
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要图表区域 -->
    <div class="charts-section">
      <!-- 走访趋势图 -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">走访趋势分析</h3>
          <el-select v-model="trendChartType" size="small" style="width: 100px">
            <el-option label="按周" value="week"></el-option>
            <el-option label="按月" value="month"></el-option>
            <el-option label="按季" value="quarter"></el-option>
          </el-select>
        </div>
        <div class="chart-container">
          <div ref="trendChart" class="trend-chart"></div>
        </div>
      </div>

      <!-- 区域分布和客户类型分布 -->
      <div class="distribution-charts">
        <div class="form-section half-width">
          <h3 class="section-title">区域分布</h3>
          <div class="chart-container">
            <div ref="regionChart" class="region-chart"></div>
          </div>
        </div>

        <div class="form-section half-width">
          <h3 class="section-title">客户类型分布</h3>
          <div class="chart-container">
            <div ref="customerTypeChart" class="customer-type-chart"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 客户经理排名 -->
    <div class="form-section">
      <div class="section-header">
        <h3 class="section-title">客户经理走访绩效排名</h3>
        <el-select v-model="rankingMetric" size="small" style="width: 120px">
          <el-option label="走访次数" value="visits"></el-option>
          <el-option label="客户数量" value="customers"></el-option>
          <el-option label="目标完成率" value="completion"></el-option>
        </el-select>
      </div>
      <div class="table-container">
        <el-table :data="managerRankingData" style="width: 100%">
          <el-table-column
            prop="rank"
            label="排名"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="客户经理"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="department"
            label="部门"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="visits"
            label="走访次数"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="customers"
            label="走访客户"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="completionRate"
            label="目标完成率"
            width="120"
            align="center"
          >
            <template #default="scope">
              <div class="completion-rate">
                <el-progress
                  :percentage="scope.row.completionRate"
                  :show-text="false"
                  :stroke-width="8"
                  status="success"
                ></el-progress>
                <span>{{ scope.row.completionRate }}%</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="performanceScore"
            label="绩效得分"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-tag :type="getScoreTagType(scope.row.performanceScore)">{{
                scope.row.performanceScore
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="trend" label="趋势" width="80" align="center">
            <template #default="scope">
              <el-icon :class="getTrendIconClass(scope.row.trend)">
                <ArrowUp v-if="scope.row.trend === 'up'" />
                <ArrowDown v-if="scope.row.trend === 'down'" />
                <Minus v-if="scope.row.trend === 'flat'" />
              </el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 重点客户走访情况 -->
    <div class="form-section">
      <div class="section-header">
        <h3 class="section-title">重点客户走访情况</h3>
        <el-button type="text" size="small" @click="viewAllCustomers"
          >查看全部</el-button
        >
      </div>
      <div class="table-container">
        <el-table :data="keyCustomersData" style="width: 100%">
          <el-table-column
            prop="name"
            label="客户名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="industry"
            label="所属行业"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="level"
            label="客户等级"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-tag :type="getCustomerLevelTagType(scope.row.level)">{{
                scope.row.level
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastVisit"
            label="最近走访日期"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="visitFrequency"
            label="走访频率"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="responsibleManager"
            label="负责人"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="走访状态"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">{{
                scope.row.status
              }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { User, ArrowUp, ArrowDown, Minus } from "@element-plus/icons-vue";

// 定义类型接口
interface ChangeInfo {
  text: string;
  class: string;
}

interface ManagerRanking {
  rank: number;
  name: string;
  department: string;
  visits: number;
  customers: number;
  completionRate: number;
  performanceScore: number;
  trend: "up" | "down" | "flat";
}

interface KeyCustomer {
  name: string;
  industry: string;
  level: string;
  lastVisit: string;
  visitFrequency: string;
  responsibleManager: string;
  status: string;
}

// 时间范围选择
const dateRange = ref<Date[]>([new Date("2023-01-01"), new Date("2023-06-30")]);

// 区域选择
const selectedRegion = ref<string>("all");

// 图表类型
const trendChartType = ref<string>("month");

// 排名指标
const rankingMetric = ref<string>("visits");

// 关键绩效指标
const totalVisits = ref<number>(586);
const visitedCustomers = ref<number>(235);
const targetCompletionRate = ref<number>(87);
const avgOrderValue = ref<string>("¥24,500");

// 指标变化
const totalVisitsChange = ref<ChangeInfo>({ text: "↑ 12%", class: "increase" });
const visitedCustomersChange = ref<ChangeInfo>({
  text: "↑ 8%",
  class: "increase",
});
const targetCompletionRateChange = ref<ChangeInfo>({
  text: "↑ 5%",
  class: "increase",
});
const avgOrderValueChange = ref<ChangeInfo>({
  text: "↑ 3%",
  class: "increase",
});

// 客户经理排名数据
const managerRankingData = ref<ManagerRanking[]>([
  {
    rank: 1,
    name: "张明",
    department: "南京分公司政企客户部",
    visits: 78,
    customers: 42,
    completionRate: 95,
    performanceScore: 98,
    trend: "up",
  },
  {
    rank: 2,
    name: "李强",
    department: "苏州分公司政企客户部",
    visits: 72,
    customers: 38,
    completionRate: 92,
    performanceScore: 95,
    trend: "up",
  },
  {
    rank: 3,
    name: "王伟",
    department: "无锡分公司政企客户部",
    visits: 65,
    customers: 35,
    completionRate: 88,
    performanceScore: 90,
    trend: "flat",
  },
  {
    rank: 4,
    name: "赵芳",
    department: "常州分公司政企客户部",
    visits: 58,
    customers: 30,
    completionRate: 82,
    performanceScore: 85,
    trend: "up",
  },
  {
    rank: 5,
    name: "陈明",
    department: "南通分公司政企客户部",
    visits: 52,
    customers: 28,
    completionRate: 78,
    performanceScore: 80,
    trend: "down",
  },
]);

// 重点客户走访情况
const keyCustomersData = ref<KeyCustomer[]>([
  {
    name: "江苏省人民政府办公厅",
    industry: "政府机构",
    level: "A级",
    lastVisit: "2023-06-28",
    visitFrequency: "每月2次",
    responsibleManager: "张明",
    status: "正常",
  },
  {
    name: "苏宁控股集团有限公司",
    industry: "零售/电商",
    level: "A级",
    lastVisit: "2023-06-25",
    visitFrequency: "每月1次",
    responsibleManager: "李强",
    status: "正常",
  },
  {
    name: "南京钢铁集团有限公司",
    industry: "制造业",
    level: "A级",
    lastVisit: "2023-06-20",
    visitFrequency: "每两月1次",
    responsibleManager: "王伟",
    status: "需跟进",
  },
  {
    name: "江苏银行股份有限公司",
    industry: "金融服务",
    level: "A级",
    lastVisit: "2023-06-18",
    visitFrequency: "每月1次",
    responsibleManager: "赵芳",
    status: "正常",
  },
  {
    name: "南京大学",
    industry: "教育机构",
    level: "B级",
    lastVisit: "2023-06-15",
    visitFrequency: "每季度1次",
    responsibleManager: "陈明",
    status: "正常",
  },
]);

// 图表引用
const trendChart = ref<HTMLElement | null>(null);
const regionChart = ref<HTMLElement | null>(null);
const customerTypeChart = ref<HTMLElement | null>(null);

// 导出报告
const exportReport = () => {
  ElMessage.success("报告导出成功");
  // 在实际项目中，这里会调用导出API
};

// 查看全部客户
const viewAllCustomers = () => {
  ElMessage.info("查看全部客户功能待实现");
};

// 根据分数获取标签类型
const getScoreTagType = (score: number): string => {
  if (score >= 90) return "success";
  if (score >= 80) return "primary";
  if (score >= 70) return "warning";
  return "danger";
};

// 获取趋势图标样式
const getTrendIconClass = (trend: string): Record<string, boolean> => {
  return {
    "trend-up": trend === "up",
    "trend-down": trend === "down",
    "trend-flat": trend === "flat",
  };
};

// 根据客户等级获取标签类型
const getCustomerLevelTagType = (level: string): string => {
  if (level === "A级") return "success";
  if (level === "B级") return "primary";
  if (level === "C级") return "warning";
  return "default";
};

// 根据走访状态获取标签类型
const getStatusTagType = (status: string): string => {
  if (status === "正常") return "success";
  if (status === "需跟进") return "warning";
  if (status === "异常") return "danger";
  return "default";
};

// 初始化图表
const initCharts = () => {
  // 在实际项目中，这里会使用 ECharts 或其他图表库初始化图表
  console.log("图表初始化");
};

// 页面加载后初始化图表
onMounted(() => {
  initCharts();
});
</script>

<style scoped>
.visit-report {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  align-items: center;
}

/* 表单区块样式 */
.form-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* 区块标题样式 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

/* 区块头部样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* 关键指标网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* 统计卡片样式 */
.stat-card {
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 指标内容样式 */
.kpi-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f0f9ff;
  color: #36cfc9;
}

.icon-large {
  font-size: 28px;
}

.kpi-info {
  flex: 1;
  margin-left: 15px;
}

.kpi-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.kpi-change .increase {
  color: #67c23a;
}

.kpi-change .decrease {
  color: #f56c6c;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 20px;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 图表容器样式 */
.chart-container {
  height: 300px;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

/* 分布图网格布局 */
.distribution-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 表格容器样式 */
.table-container {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

/* 完成率样式 */
.completion-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 趋势图标样式 */
.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-flat {
  color: #909399;
}

/* 半宽样式 */
.half-width {
  width: 100%;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .distribution-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .visit-report {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .form-section {
    padding: 15px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .chart-container {
    height: 250px;
    padding: 8px;
  }
}
</style>
